@import './variables.scss';
@import './mixin.scss';
@import './common.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './flex.scss';
@import './mixings.scss';

body {
	height: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
		Microsoft YaHei, Arial, sans-serif;
}
.el-date-editor--datetimerange .el-range-input {
	font-family: inherit !important;
}

label {
	font-weight: 700;
}

html {
	height: 100%;
	box-sizing: border-box;
}

#app {
	height: 100%;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

a:focus,
a:active {
	outline: none;
}

a,
a:focus,
a:hover {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}

div:focus {
	outline: none;
}

.clearfix {
	&:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: ' ';
		clear: both;
		height: 0;
	}
}

p {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

ul {
	list-style: none;
}

img {
	border-style: none;
}

// main-container global css
.app-container {
	padding: 20px;
}

.imgCenter {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 9999;
	text-align: center;
	overflow: auto;

	.img-box {
		width: 100%;
		height: 600px;
		overflow: auto;
		img {
			width: 100%;
			height: auto;
			display: block;
		}
	}
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.td-title {
	max-width: 55px;
}

.game-container {
	margin: 24px 16px 50px 16px;

	.params {
		padding: 15px 20px 10px 20px;
		margin-top: 10px;
		border-radius: 3px;
		box-shadow: 0 2px 7px #ccc;
		.handle {
			margin-bottom: 25px;
		}
	}
	.content {
		margin-top: 28px;
		padding: 10px;
		border-radius: 1px;
		box-shadow: 0 2px 7px #ccc;
		.el-pagination {
			text-align: right;
			margin-top: 15px;
		}
	}

	.el-date-editor .el-range-separator {
		display: inline-block;
		width: 24px;
	}
}

.h2-line {
	padding-left: 20px;
	border-left: 8px solid #3f9eff;
	font-family: MicrosoftYaHeiUI;
	font-size: 18px;
	color: #404040;
	margin: 0;
}

.edit-drawer {
	.el-card__body {
		overflow-y: scroll !important;
		height: 100vh !important;
		padding-bottom: 100px;
	}
}

.table-overflow {
	min-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}

::-webkit-scrollbar {
	width: 5px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar:horizontal {
	height: 12px;
}

::-webkit-scrollbar-track:horizontal {
	border-radius: 0;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.01);
	background-color: rgba(0, 0, 0, 0.03);
}

::-webkit-scrollbar-thumb:horizontal {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb:horizontal:hover {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.2);
}

.imgTip {
	color: red;
}

#nprogress .bar {
	background: #24de72 !important; //颜色可修改
}

.dialog-fade-enter-active .el-dialog.way {
	animation: anim-open 0.3s;
}

.dialog-fade-leave-active .el-dialog.way {
	animation: anim-close 0.3s;
}

@keyframes anim-open {
	0% {
		transform: translate3d(100%, 0, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes anim-close {
	0% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}

	100% {
		transform: translate3d(100%, 0, 0);
		opacity: 0;
	}
}
.el-table {
	th.drag_start {
		opacity: 0.8;
		border-left: 2px dotted #666;
		border-right: 2px dotted #666;
		border-top: 2px dotted #666;
		border-bottom: 2px dotted #666;
		transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	}
	.drag_end_left {
		border-left: 2px dotted #333;
	}
	.drag_end_right {
		border-right: 2px dotted #333;
	}
}
.el-table__body-wrapper {
	&::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}
	z-index: 2;
}
.el-table__fixed-body-wrapper .el-table__body {
	padding-bottom: 5px;
}
.cardBorder {
	border: 3px solid #ffffff;
}
.cardBorderDashed {
	border: 1px dashed #5d5d5d;
	border-radius: 4px;
}
.ml5 {
	margin-left: 5px;
}
